<div class="table-operations">
  <button nz-button nzType="primary" (click)="addUser()">添加用户</button>
</div>
<nz-table #basicTable nzBordered [nzData]="dataSet">
  <thead>
    <tr>
      <th *ngFor="let item of headers">{{item}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of basicTable.data">
      <td>{{item.username}}</td>
      <td>{{item.nickName}}</td>
      <td>{{item.role.name}}</td>
      <td>
        <a (click)="delUser(item)">删除</a>
      </td>
    </tr>
  </tbody>
</nz-table>

<nz-modal [(nzVisible)]="modalVisible" nzTitle="添加用户" (nzOnCancel)="modalCancel()" (nzOnOk)="modalOk()">
  <form nz-form [formGroup]="userForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickName">昵称</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="nickName" id="nickName">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">用户名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="username" id="username">
        <nz-form-explain *ngIf="userForm.get('username').dirty && userForm.get('username').errors">用户名必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="role">角色</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select formControlName="role" nzAllowClear nzPlaceHolder="请选择">
          <nz-option *ngFor="let item of roleList" [nzValue]="item._id" [nzLabel]="item.name"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="userForm.get('role').dirty && userForm.get('role').errors">角色必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password" formControlName="password" id="password">
        <nz-form-explain *ngIf="userForm.get('password').dirty && userForm.get('password').errors">密码必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">邮箱</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="email" id="email">
        <nz-form-explain *ngIf="userForm.get('email').dirty && userForm.get('email').errors">邮箱必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
